<template>
    <div class="exam-result" :class="{ 'is-mobile': $isMobile }">
        <div class="exam-header">考试结果</div>
        <div class="exam-result__main">
            <div class="top-box"></div>
            <div class="title-box">本次成绩</div>

            <div class="nums-box">
                <div class="box1">

                </div>
                <div class="num">
                    {{ datas.percent }}
                </div>
                <div class="tips-box">
                    总分数
                </div>
            </div>

            <template v-if="pass">
                <div class="reset-box">祝贺您，考试通过~ ，请截图给相关工作人员</div>
            </template>

            <template v-else>
                <div class="reset-box" @click="handleReset">重新考试</div>
            </template>
        </div>

        <div class="lineItem"></div>


        <div class="exam-result__list">
            <div class="top-box"></div>
            <div class="title">答题卡</div>

            <div class="selectItems">
                <div v-for="(item, index) in arr" class="items" :key="index">
                    <div class="flag" :class="[item.class]"></div>
                    <div class="text">{{ item.text }}</div>
                </div>
            </div>



            <div class="answers">
                <div v-for="(item, index) in datas.exams" class="items" :class="[item.status]" :key="index">
                    {{ index + 1 }}
                </div>
            </div>

            <div class="detail" @click="toDetail">答题详情</div>
        </div>
    </div>
</template>


<script>

import { formatExams, calcResult, calcStatus } from './calc'

export default {


    data() {
        return {
            arr: [
                {
                    text: "答对",
                    class: "success",
                },
                {
                    text: "答错",
                    class: "error",
                },
                {
                    text: "未作答",
                    class: "empty",
                },
            ],
            datas: {
                lessonId: 0,
                percent: 0,
                passRate: 0
            },

        }

    },

    computed: {
        pass() {
            return this.datas.passRate <= this.datas.percent;
        }
    },


    mounted() {
        this.init();
    },
    beforeDestroy() {
    },

    methods: {


        async init() {
            const { examId } = this.$route.query;



            const loading = this.$loading();
            let { data } = await this.$fetch.get(`/api/topic-lesson-exams/get`, { id: examId });

            let { exams, answers } = formatExams(data)
            data.exams = calcStatus(exams, answers)

            const { percent } = calcResult(data.exams, answers);
            data.percent = percent;


            const { data: { passRate } = {} } = {} = await this.$fetch.get(`/api/topic-lesson/${data.lessonId}`);
            console.log("passRate", passRate)
            data.passRate = passRate;

            this.datas = data;
            loading.close()
        },

        async handleReset() {
            try {
                const { data } = await this.$fetch.post(`/api/topic-lesson/startExam`, { lessonId: this.datas.lessonId });

                this.$router.push({
                    name: "lesson-exam-process",
                    query: {
                        examId: data.exams.id,
                        lessonId: this.datas.lessonId,
                    }
                })

            } catch (error) {
                console.log(error)
            }

        },


        toDetail() {
            this.$router.push({
                name: "lesson-exam-detail",
                query: {
                    examId: this.$route.query.examId,
                }
            })
        },


    },


}
</script>


<style lang="less" scoped>
.exam-result {
    background: #FFFFFF;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.exam-header {
    padding-top: 22px;
    padding-bottom: 19px;
    padding-left: 30px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 22px;
    color: #333333;
    line-height: 30px;
    text-align: left;
    font-style: normal;
    border: 0.5px solid #EFEFEF;
}


.top-box {
    width: 175px;
    height: 34px;
    background: url(../../../../assets/top-exam-flag.png) center center no-repeat;
}


.exam-result__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;



    .title-box {
        height: 42px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30px;
        color: #333333;
        line-height: 42px;
        text-align: center;
        margin: 26px 0;
    }

    .nums-box {
        width: 206px;
        height: 206px;
        background-color: #3560AB;
        border-radius: 50%;
        position: relative;
        background-origin: 50%;

        .box1 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 80%;
            background-color: #FFFFFF;
            border-radius: 50%;
        }

        .num {
            position: absolute;
            left: 50%;
            top: 51px;
            transform: translate(-50%, 0);
            height: 67px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 48px;
            color: #333333;
            line-height: 67px;
            text-align: center;
            font-style: normal;
        }

        .tips-box {
            position: absolute;
            left: 50%;
            bottom: 54px;
            transform: translate(-50%, 0);
            height: 25px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #AEAEAE;
            line-height: 25px;
            text-align: center;
            font-style: normal;
        }


    }

    .time-box {
        width: 161px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #F9F9FB;
        border-radius: 4px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #AEAEAE;
        line-height: 17px;
        text-align: center;
        font-style: normal;
        margin-top: 26px;
        user-select: none;

        .time {
            font-size: 20px;
            color: #3560AB;
            line-height: 28px;

        }
    }

    .reset-box {
        margin-top: 36px;

        background: #3560AB;
        border-radius: 8px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 22px;
        text-align: center;
        font-style: normal;
        padding: 8px 78px;
        cursor: pointer;
    }

}

.lineItem {
    background-color: #F7F7F7;
    width: 100%;
    padding-top: 10px;
}

.exam-result__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    padding: 0 57px;


    .title {
        margin-top: 7px;
        margin-bottom: 36px;
        width: 90px;
        height: 42px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30px;
        color: #333333;
        line-height: 42px;
        text-align: center;
        font-style: normal;
    }

    .selectItems {
        position: relative;
        width: 100%;
        left: 0;
        display: flex;
        flex-direction: row;
        margin-bottom: 53px;

        .items {
            margin-right: 37px;
            cursor: default;
            user-select: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .flag {
            width: 20px;
            height: 20px;
            display: inline-flex;
        }

        .text {
            display: inline-flex;
            margin-left: 9px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
        }
    }

    .answers {
        position: relative;
        width: 100%;
        left: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .items {
            width: 30px;
            height: 30px;
            border-radius: 2px;
            font-family: PingFangSC, PingFang SC;
            font-size: 12px;

            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 40px;
            margin-bottom: 40px;
            border: 1px solid #D8D8D8;
            color: #333333;
            cursor: default;
            user-select: none;
        }

        .success {
            background: #3560AB;
            color: #FFFFFF;
            border: 1px solid transparent;

        }

        .error {
            background: #FF3E11;
            color: #FFFFFF;
            border: 1px solid transparent;


        }


    }

    .detail {
        background: #3560AB;
        border-radius: 8px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 22px;
        text-align: center;
        font-style: normal;
        padding: 8px 78px;
        cursor: pointer;
        user-select: none;

    }


}


.success {
    background: #3560AB;

}

.error {
    background: #FF3E11;


}

.empty {
    border: 1px solid #D8D8D8;
}

.exam-result.is-mobile {
    .items {
        margin-right: 20px;
    }
}
</style>
